<template>
  <van-tabbar v-model="active">
    <van-tabbar-item @click="handleSecurity(item.path)" :to="item.path" v-for="(item,index) in icons" :key="index">
      <span>{{ item.name }}</span>
      <template #icon="props">
        <img :src="props.active ? item.active : item.inactive"/>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import {reactive, ref} from 'vue';
import {useDataStore} from "@/stores/dataStore.js";
import {useRouter} from 'vue-router'

const dataStore = useDataStore()
const active = ref(0);

const router = useRouter()
//底部导航列表
const icons = reactive([
  {
    name:'首页',
    path:'/home/index',
    inactive: "",
    active: "",
  },
  {
    name: '工作台',
    path: '/work/index',
    inactive: "",
    active: "",
  },
  {
    name: '我的',
    path: '/user/index',
    inactive: "",
    active: "",
  },
  // {
  //   name:'',
  //   path:'',
  //   inactive: "",
  //   active: "",
  // },

])
const handleSecurity = (path) => {
  if (!dataStore.isLogin) {
    ElMessage.error('请先登录')
    router.push("/home/login")
  }
}
</script>

<style scoped lang="scss">

</style>
